<template>
	<!-- 商品-活动商品列表 -->
	<div class="article-manager">
		<div class="i-layout-page-header" v-if="$route.params.id">
			<PageHeader class="product_tabs" hidden-breadcrumb>
				<div slot="title" class="acea-row row-middle">
					<router-link :to="{ path: `${roterPre}/product/product_activities` }">
						<div class="font-sm after-line">
							<span class="iconfont iconfanhui"></span>
							<span class="pl10">返回</span>
						</div>
					</router-link>
					<span v-text="'活动商品列表'" class="mr20 ml16"></span>
				</div>
			</PageHeader>
		</div>
		<Card :bordered="false" dis-hover class="ivu-mt" :padding="0">
			<div class="new_card_pd">
				<!-- 筛选条件 -->
				<Form ref="formValidate" inline :model="formValidate" :label-width="labelWidth"
					:label-position="labelPosition" @submit.native.prevent>

					<FormItem label="状态：">
						<Select v-model="formValidate.status" placeholder="请选择" clearable @on-change="userSearchs"
							class="input-add">
							<Option value="0">待审核</Option>
							<Option value="1">审核通过</Option>
							<Option value="2">审核失败</Option>
						</Select>
					</FormItem>

					<Button type="primary" @click="userSearchs">查询</Button>

				</Form>
			</div>
		</Card>

		<Card :bordered="false" dis-hover class="ivu-mt">
			<!-- 商品评论表格 -->
			<!-- <Table ref="table" :columns="columns" :data="tableList" class="ivu-mt" :loading="loading"
				no-data-text="暂无数据" no-filtered-data-text="暂无筛选结果"> -->
			<Table
			    ref="table" 
			    row-key="id" 
			    :load-data="handleLoadData" 
			    :columns="columns" 
			    :data="tableList" 
			    :row-class-name="rowClassName"
			    class="ivu-mt"
				max-height="560"
			  >

				<template slot-scope="{ row }" slot="image">
					<viewer>
						<div class="tabBox_img">
							<img v-lazy="row.image" width="50" />
						</div>
					</viewer>
				</template>

				<template slot-scope="{ row, index }" slot="action">
					<a @click="detail(row)">详情</a>
						<Divider v-if="row.status == 0" type="vertical" />
						<!-- <a @click="review(row)">审核</a> -->
						<a v-if="row.status == 0 && activityDetail.status == 1"
						  @click="review(row)" 
						  :class="{ 'disabled-action': row.status === -1 }"
						>
						  审核
						</a>
					
				</template>
			</Table>
			<div class="acea-row row-right page">
				<Page :total="total" :current="formValidate.page" show-elevator show-total @on-change="pageChange"
					:page-size="formValidate.limit" />
			</div>
		</Card>
		<Modal v-model="followUpModalVisible" title="活动审核" :footer-hide="true" width="800">
			<div class="article-manager video-icon form-submit" id="shopp-manager">
				<Card :bordered="false" dis-hover class="ivu-mt">
					<Form class="formValidate" ref="formValidate" :model="reviewData"
						:label-position="labelPosition" @submit.native.prevent>
						<Col span="24">
						<FormItem label="审核状态：" prop="status">
							<Select v-model="reviewData.status" v-width="460">
								<Option :value="0">审核中</Option>
								<Option :value="1">审核通过</Option>
								<Option :value="2">审核失败</Option>
							</Select>
						</FormItem>
						</Col>
						<Col span="24">
						<FormItem label="备注：" prop="status">
							<Input v-model="reviewData.remark" type="textarea" :rows="4" placeholder="审核说明..." />
						</FormItem>
						</Col>
					</Form>
				</Card>
				<Card :bordered="false" dis-hover>
					<Form>
						<FormItem>
							<div class="floatRight">
								<Button type="primary" class="submission" @click="handleCancel()">取消</Button>
								<div style="display: inline-block;width: 15px;"></div>
								<Button type="primary" class="submission"
									@click="handleSubmit('reviewData')">保存</Button>
							</div>
						</FormItem>
					</Form>
				</Card>
			</div>
		</Modal>
		<active-good-info ref="addattr" :activeGoodsDetail="activeGoodsDetail">
		</active-good-info>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		setReplyApi,
		fictitiousReply,
		activityGoodsListApi,
		getActiveGoodDetail,
		reviewActiveGoodInfo,
		getActiveDetail,
		getActiveInfoApi,
	} from "@/api/product";
	import activeGoodInfo from '../components/activeGoodInfo.vue';
	import timeOptions from "@/utils/timeOptions";
	import Setting from "@/setting";
	export default {
		name: "product_productEvaluate",
		components: {
			activeGoodInfo
		},
		data() {
			return {
				roterPre: Setting.roterPre,
				activeGoodsDetail: [],
				modals: false,
				activityStatus:0,
				followUpModalVisible: false,
				grid: {
					xl: 7,
					lg: 10,
					md: 12,
					sm: 12,
					xs: 24,
				},
				reviewData: {
					status: 0,
					id: 0,
					remark: "",
				},
				formValidate: {
					status: "",
					data: "",
					store_name: "",
					activity_id: 0,
					account: "",
					product_id: this.$route.params.id === undefined ? 0 : this.$route.params.id,
					page: 1,
					limit: 15,
				},
				options: timeOptions,
				value: "45",
				tableList: [],
				total: 0,
				loading: false,
				columns: [{
						title: "ID",
						key: "id",
						width: 80,
					},
					{
						title: "商品图",
						slot: "image",
						minWidth: 50,
					},
					{
						title: "商品名称",
						key: "good_name",
						minWidth: 100,
					},

					{
						title: "商品价格",
						key: "price",
						minWidth: 90,
					},
					{
						title: "状态",
						key: "status_name",
						minWidth: 90,
					},
					{
						title: "操作",
						slot: "action",
						fixed: "right",
						minWidth: 150,
					},
				],
				timeVal: [],
				contents: {
					content: "",
				},
				ruleInline: {
					content: [{
						required: true,
						message: "请输入回复内容",
						trigger: "blur"
					}, ],
				},
				rows: {},
				replyModal: false,
				goodsModal: false,
				attrModal: false,
				tableColumns: [
					// {
					//   type: "selection",
					//   width: 60,
					//   align: "center",
					// },
					{
						width: 60,
						align: 'center',
						render: (h, params) => {
							return h('Radio', {
								props: {
									value: params.row.unique === this.attrData.unique
								},
								on: {
									'on-change': () => {
										this.attrData = params.row;
										this.attrModal = false;
									}
								}
							});
						}
					},
					{
						title: "图片",
						slot: "image",
						width: 120,
						align: "center",
					},
					{
						title: "规格",
						key: "suk",
						align: "center",
						minWidth: 120,
					},
					{
						title: "售价",
						key: "ot_price",
						align: "center",
						minWidth: 120,
					},
					{
						title: "优惠价",
						key: "price",
						align: "center",
						minWidth: 120,
					},
				],
				tableData: [],
				goodsAddType: '',
				goodsData: {},
				attrData: {},
				avatarData: {},
				pictureData: [],
				selectProductAttrList: [],
				pictureModal: false,
				isChoice: '',
				picTit: '',
				tableIndex: 0,
				activityDetail:{
					name:"",
					type:1,
					start_time:"",
					end_time:"",
					status:0,
					requirements:"",
					auto_generate:"",
				},
				gridPic: {
					xl: 6,
					lg: 8,
					md: 12,
					sm: 12,
					xs: 12,
				},
				gridBtn: {
					xl: 4,
					lg: 8,
					md: 8,
					sm: 8,
					xs: 8,
				},
			};
		},
		computed: {
			...mapState("admin/layout", ["isMobile"]),
			labelWidth() {
				return this.isMobile ? undefined : 96;
			},
			labelPosition() {
				return this.isMobile ? "top" : "right";
			},
		},
		created() {
			if (this.$route.query.is_reply == 0) {
				this.formValidate.is_reply = this.$route.query.is_reply;
			}
			this.formValidate.activity_id = this.$route.params.id
			if (this.formValidate.activity_id > 0) {
				this.getActiveInfo();
				this.getList();
				this.activeDetail(this.formValidate.activity_id);
			} else {
				this.$Message.error("未获取到活动");
			}

		},
		watch: {
			"$route.params.id"(to, from) {
				this.formValidate.product_id = 0;
				this.getList();
			},
			replyModal(value) {
				if (!value) {
					this.goodsData = {};
					this.attrData = {};
					this.avatarData = {};
					this.pictureData = [];
					this.getList();
				}
			}
		},
		methods: {
			rowClassName(row, index) {
			      if (row.status === -1) {
			        return 'disabled-row';
			      }
			      return '';
			    },
			    editActivity(row) {
			      if (row.status === -1) {
			        this.$Message.warning('该商品已禁用，无法编辑');
			        return;
			      }
			      // 正常的编辑逻辑
			    },
			activeDetail(activity_id){
				getActiveDetail(activity_id)
					.then(async (res) => {
						this.activityDetail = res.data.info
						console.log('this.activityDetail',this.activityDetail)
					})
					.catch((res) => {
						this.$Message.error(res.msg)
					})
			},	
			detail(row) {
				getActiveGoodDetail(row.id)
					.then(async (res) => {
						this.activeGoodsDetail = res.data.info
						this.$refs.addattr.modal = true;
					})
					.catch((res) => {
						this.$Message.error(res.msg)
					})
			},
			review(row) {
				getActiveGoodDetail(row.id)
					.then(async (res) => {
						this.reviewData.id = res.data.info.id
						this.reviewData.remark = res.data.info.remark
						this.reviewData.status = res.data.info.status
						this.followUpModalVisible = true;
					})
					.catch((res) => {
						this.$Message.error(res.msg)
					})
			},
			handleSubmit() {
				if (this.reviewData.id) {
					reviewActiveGoodInfo(this.reviewData.id, this.reviewData)
						.then(async (res) => {
							this.followUpModalVisible = false;
							this.$Message.success("保存成功")
							this.getList()
						})
						.catch((res) => {
							this.$Message.error(res.msg)
						})
				}
			},
			handleCancel() {
				this.reviewData = {
					id: 0,
					status: 0,
					remark: "",
				}
				this.followUpModalVisible = false;
			},
			// 查看评论列表
			seeReply(row) {
				this.$refs.reply.modals = true;
				this.$refs.reply.getList(row.id);
			},
			// 添加虚拟评论；
			add() {
				// this.$modalForm(fictitiousReply(this.formValidate.product_id)).then(() =>
				//   this.getList()
				// );
				this.replyModal = true;
			},
			oks() {
				this.modals = true;
				this.$refs["contents"].validate((valid) => {
					if (valid) {
						setReplyApi(this.contents, this.rows.id)
							.then(async (res) => {
								this.$Message.success(res.msg);
								this.modals = false;
								this.$refs["contents"].resetFields();
								this.getList();
							})
							.catch((res) => {
								this.$Message.error(res.msg);
							});
					} else {
						return false;
					}
				});
			},
			cancels() {
				this.modals = false;
				this.$refs["contents"].resetFields();
			},
			// 删除
			del(row, tit, num) {
				let delfromData = {
					title: tit,
					num: num,
					url: `product/reply/${row.id}`,
					method: "DELETE",
					ids: "",
				};
				this.$modalSure(delfromData)
					.then((res) => {
						this.$Message.success(res.msg);
						this.tableList.splice(num, 1);
						if (!this.tableList.length) {
							this.formValidate.page =
								this.formValidate.page == 1 ? 1 : this.formValidate.page - 1;
						}
						this.getList();
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 回复
			reply(row) {
				this.modals = true;
				this.rows = row;
				this.contents.content = row.replyComment ? row.replyComment.content : '';
			},
			// 具体日期
			onchangeTime(e) {
				this.timeVal = e;
				// this.formValidate.data = this.timeVal.join('-');
				this.formValidate.data = this.timeVal[0] ? this.timeVal.join("-") : "";
				this.formValidate.page = 1;
				this.getList();
			},
			// 选择时间
			selectChange(tab) {
				this.formValidate.data = tab;
				this.timeVal = [];
				this.formValidate.page = 1;
				this.getList();
			},
			//活动详情
			getActiveInfo(){
				getActiveInfoApi(this.formValidate.activity_id)
					.then(async (res) => {
						let data = res.data.info;
						this.activityStatus = data.status
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$Message.error(res.msg);
					});
			},
			// 列表
			getList() {
				this.loading = true;
				if(this.formValidate.status == undefined || this.formValidate.status == ""){
					this.formValidate.status = -1
				}
				this.formValidate.store_name = this.formValidate.store_name || "";
				activityGoodsListApi(this.formValidate)
					.then(async (res) => {
						let data = res.data;
						this.tableList = data.list;
						this.total = res.data.count;
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$Message.error(res.msg);
					});
			},
			pageChange(index) {
				this.formValidate.page = index;
				this.getList();
			},
			// 表格搜索
			userSearchs() {
				this.formValidate.page = 1;
				this.getList();
			},
			search() {},
			callGoods() {
				this.goodsModal = true;
			},
			callAttr() {
				this.attrModal = true;
			},
			getProductId(goods) {
				this.goodsData = goods;
				this.goodsModal = false;
				this.attrData.unique = '';
			},
			getPic(pc) {
				this.avatarData = pc;
				this.pictureModal = false;
			},
			getPicD(pc) {
				let pictureData = [...this.pictureData];
				pictureData = pictureData.concat(pc);
				pictureData.sort((a, b) => a.att_id - b.att_id);
				let picture = [];
				for (let i = 0; i < pictureData.length; i++) {
					if (pictureData[i + 1] && pictureData[i].att_id != pictureData[i + 1].att_id) {
						picture.push(pictureData[i]);
					}
					if (!pictureData[i + 1]) {
						picture.push(pictureData[i]);
					}
				}
				this.pictureData = picture;
				this.pictureModal = false;
			},
			callPicture(type) {
				this.isChoice = type;
				this.pictureModal = true;
			},
			removePicture(att_id) {
				let index = this.pictureData.findIndex((item) => item.att_id === att_id);
				this.pictureData.splice(index, 1);
			},
		},
	};
</script>
<style scoped lang="stylus">
	.input-add {
		width: 250px;
		margin-right: 14px;
	}

	.line2 {
		max-height 36px;
	}

	.content_font {
		color: #2b85e4;
	}

	.search {
		>>>.ivu-form-item-content {
			margin-left: 0 !important;
		}
	}

	.ivu-mt .Button .bnt {
		margin-right: 6px;
	}

	.ivu-mt .ivu-table-row {
		font-size: 12px;
		color: rgba(0, 0, 0, 0.65);
	}

	.ivu-mt>>>.ivu-table-cell {
		padding: 10px 0 !important;
	}

	.pictrue {
		height: 40px;
		width: 40px;
		display: inline-block;
		cursor: pointer;
	}

	.pictrue img {
		width 100%;
		height: 100%;
		display: block;
	}

	.ivu-mt .imgPic .info {
		width: 60%;
		margin-left: 10px;
	}

	.ivu-mt .picList .pictrue {
		height: 36px;
		margin: 7px 3px 0 3px;
	}

	.ivu-mt .picList .pictrue img {
		height: 100%;
		display: block;
	}

	.product-data {
		display: flex;
		align-items: center;

		.image {
			width: 50px !important;
			height: 50px !important;
			margin-right: 10px;
		}
	}
	.disabled-row {
	  background-color: #f5f5f5 !important;
	  color: #c0c4cc !important;
	}
	
	.disabled-row td {
	  background-color: #f5f5f5 !important;
	  color: #c0c4cc !important;
	}
	.ivu-table .disabled-row:hover td {
	  background-color: #f5f5f5 !important;
	  color: #c0c4cc !important;
	}
	/* 如果没有scoped，可以不用深度选择器 */
	.ivu-mt .disabled-row td {
	  background-color: #f5f5f5 !important;
	  color: #c0c4cc !important;
	}
	
	.ivu-mt .disabled-row:hover td {
	  background-color: #f5f5f5 !important;
	  color: #c0c4cc !important;
	}
	
	/* 如果样式是scoped的，则使用深度选择器 */
	/* 使用 /deep/ （适用于 less/sass） */
	.ivu-mt /deep/ .disabled-row td {
	  background-color: #f5f5f5 !important;
	  color: #c0c4cc !important;
	}
	
	.ivu-mt /deep/ .disabled-row:hover td {
	  background-color: #f5f5f5 !important;
	  color: #c0c4cc !important;
	}
	
	/* 或者使用 ::v-deep （适用于 sass） */
	.ivu-mt ::v-deep .disabled-row td {
	  background-color: #f5f5f5 !important;
	  color: #c0c4cc !important;
	}
	
	.ivu-mt ::v-deep .disabled-row:hover td {
	  background-color: #f5f5f5 !important;
	  color: #c0c4cc !important;
	}
</style>